<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar fixed>
      <template v-slot:left>
        <img src="@/assets/logo.png" alt class="logo" />
      </template>
      <template #right>
        <van-icon name="search" size="0.48rem" color="#fff" @click="moveSearchPageFn"/>
      </template>
    </van-nav-bar>
    <!-- tab栏导航 -->
    <div class="main">
      <van-tabs
      v-model="channelId"
      @change="changeChannelFn"
      animated
      sticky
      offset-top="1.226667rem"
    >
      <van-tab
        :name="channel.id"
        :title="channel.name"
        v-for="(channel) in userChannelList"
        :key="channel.id"
      >
        <ArticleList :channelId="channelId"></ArticleList>
      </van-tab>
    </van-tabs>
    <!-- 编辑频道图标+号 -->
    <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="plusClickFn"/>
    </div>
    <!-- 频道管理弹出层 -->
    <van-popup v-model="show" class="channel_popup" get-container="body">
      <ChannelEdit v-model="channelId" ref="editRef" @closeEV="closeFn" @addChannelEV="addChannelFn" @removeChannelEV="removeChannelFn" :userList="userChannelList" :unCheckList="unCheckChannelList"></ChannelEdit>
    </van-popup>
  </div>
</template>

<script>
import { getUserChannelsAPI, getAllChannelsAPI, updateChannelsAPI, deleteChannelAPI } from '@/api'
import ArticleList from './components/ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
export default {
  data () {
    return {
      channelId: 0, // tab导航-激活频道Id
      userChannelList: [], // 用户选择频道列表
      // articleList: []
      show: false, // 控制频道管理弹出层
      allChannelList: [], // 所有频道列表
      channelScrollTObj: {}// 保存每个频道的滚动位置
    }
  },
  async created () {
    // 频道列表
    const res = await getUserChannelsAPI()
    // console.log(res)
    this.userChannelList = res.data.data.channels
    // this.changeChannelFn()
    // 所有频道列表
    const res2 = await getAllChannelsAPI()
    this.allChannelList = res2.data.data.channels
  },
  components: { ArticleList, ChannelEdit },
  methods: {
    // tabs切换的事件->获取文章列表数据
    async changeChannelFn () {
      // 获取文章列表
      // const res2 = await getAllArticleList({
      //   channel_id: this.channelId, // 先默认请求 推荐频道 数据
      //   timestamp: (new Date()).getTime()
      // })
      // console.log(res2)
      // this.articleList = res2.data.data.results

      // tab切换后，设置滚动条位置
      // tab切换时，这个组件内部，会把切走的容器height设置为0，滚动条因为没有高度回到了顶部
      // 切回来的一瞬间，没有高度，滚动事件从底下上来也被触发了，所以才把数据里设置为6
      // 切换来的一瞬间,高度为0，你设置滚动位置也无用
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.channelScrollTObj[this.channelId]
        console.log(222)
      })
    },
    // +号点击方法
    plusClickFn () {
      this.show = true
    },
    // 添加频道
    async addChannelFn (channelObj) {
      this.userChannelList.push(channelObj)
      // 解决方法
      const newArr = this.userChannelList.filter(obj => obj.id !== 0)
      const theNewArr = newArr.map((obj, index) => {
        const newObj = { ...obj }// 浅拷贝
        delete newObj.name
        newObj.seq = index

        return newObj// 让map方法把新对象收集起来形成一个新的数组
      })
      const res = await updateChannelsAPI({
        channels: theNewArr
      })
      console.log(res)
    },
    // 删除频道
    async removeChannelFn (channelObj) {
      const index = this.userChannelList.findIndex(obj => obj.id === channelObj.id)
      this.userChannelList.splice(index, 1)
      // 第二种方式：只调用删除的接口
      const res = await deleteChannelAPI({
        channelId: channelObj.id
      })
      console.log(res)
    },
    // 关闭弹出层
    closeFn () {
      this.show = false
      // 让内部的编辑状态回归false
      this.$refs.editRef.isEdit = false
    },
    // 首页-右上角放大镜点击事件 -> 跳转搜索页面
    moveSearchPageFn () {
      this.$router.push('/search')
    },
    // 监听网页的滚动事件
    scrollFn () {
      this.$route.meta.scrollT = document.documentElement.scrollTop
      // 同时保存当前频道的滚动距离
      this.channelScrollTObj[this.channelId] = document.documentElement.scrollTop
      // console.log(this.channelScrollTObj)
      console.log(111)
    }
  },
  // 计算属性
  computed: {
    unCheckChannelList () {
      // 目标：把所有频道数组挨个对象取出，去用户已选频道数组里查找，如果找不到，则让filter方法收集到一个新的数组里
      const newArr = this.allChannelList.filter(bigObj => {
        const index = this.userChannelList.findIndex(smallObj => {
          return smallObj.id === bigObj.id
        })
        // 如果找到了 index > -1
        if (index > -1) {
          return false
        } else {
          return true
        }
      })
      return newArr
    }
  },
  // activated
  mounted () {
    // console.log('我是mounted')
    // console.log('mounted的scrollT', this.$route.meta.scrollT)
    // console.log('documentElement', document.documentElement.scrollTop)
    // html标签获取scrollTop，滚动的距离，和设置滚动的位置
    // 立刻设置 滚动条位置
    window.addEventListener('scroll', this.scrollFn)
    document.documentElement.scrollTop = this.$route.meta.scrollT

    // console.log('我是mounted123')
    // console.log('mounted的scrollT123', this.$route.meta.scrollT)
    // console.log('documentElement123', document.documentElement.scrollTop)
  },
  destroyed () {
    // console.log('我是destoryed')
    // console.log('destroyed的scrollT', this.$route.meta.scrollT)
    // console.log('documentElement', document.documentElement.scrollTop)
    window.removeEventListener('scroll', this.scrollFn)
  }

}
</script>

<style scoped lang="less">
.logo {
  width: 100px;
  height: 30px;
}
.main {
  padding-top: 46px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
     padding-right: 30px;
     background-color: #fff;
   }
   // 设置小图标的样式
.moreChannels {
     position: fixed;
     top: 62px;
     right: 8px;
     z-index: 999;
}
.channel_popup{
  width: 100vw;
  height: 100vh;
  // vm和vh是css3新出的单位，参考浏览器窗口的百分比
}
</style>
